<script setup lang="ts">
  import { ref, computed, watch, onMounted } from 'vue';
  import { useBooleanStore } from '@/store';
  import { sendSingleSearch } from '@/api/inventory-management';
  import { SingleSearchParam } from '@/api/inventory-management/types';
  import { Notification } from '@arco-design/web-vue';

  const booleanStore = useBooleanStore();
  const emit = defineEmits(['updateArray']);
  const pageSize = ref<number>(10);
  const pageNumber = ref<number>(1);
  const productCode = ref<string>('');
  const itemCode = ref<string>('');
  const mProductNumber = ref<string>('');
  const qualityCode = ref<string>('');
  const lotNum = ref<string>('1架份');
  const logNumSend = computed<number>(() => {
    switch (lotNum.value) {
      case '1架份':
        return 1;
      case '2架份':
        return 2;
      case '3架份':
        return 3;
      case '5架份':
        return 5;
      default:
        return 1;
    }
  });
  // 发送搜索数据
  const flowQueryData = computed<SingleSearchParam>(() => ({
    searchParams: {
      productCode: productCode.value,
      itemCode: itemCode.value,
      mProductNumber: mProductNumber.value,
      qualityCode: qualityCode.value,
      lotNum: logNumSend.value,
    },
    pageParameter: {
      rows: pageSize.value,
      page: pageNumber.value,
    },
  }));
  async function handleSearch() {
    const newData = await sendSingleSearch(flowQueryData.value);
    if (newData.retCode === '200') {
      emit('updateArray', newData.responseBody);
    } else {
      Notification.error({
        title: '失败',
        content: newData.message ? newData.message : '查询失败',
        closable: true,
      });
    }
  }
  function reset() {
    productCode.value = '';
    itemCode.value = '';
    mProductNumber.value = '';
    qualityCode.value = '';
    lotNum.value = '1架份';
    setTimeout(() => {
      handleSearch();
    }, 150);
  }
  // 监听分页
  watch([() => booleanStore.pageNum, () => booleanStore.pageSize], () => {
    if (booleanStore.num5 === 33) {
      pageNumber.value = booleanStore.pageNum;
      pageSize.value = booleanStore.pageSize;
      handleSearch();
    }
  });
  onMounted(() => {
    handleSearch();
  });
</script>

<template>
  <a-row :gutter="{ md: 8, lg: 24, xl: 32 }">
    <a-col :span="6">
      <a-input
        v-model="itemCode"
        placeholder="图号"
        size="large"
        @press-enter="handleSearch"
      />
    </a-col>
    <a-col :span="12">
      <div class="input-col">
        <a-button type="primary" size="large" @click="handleSearch"
          >查询</a-button
        >
        <a-button class="btn-reset" size="large" @click="reset">重置</a-button>
      </div>
    </a-col>
  </a-row>
</template>

<style scoped>
  .input-col {
    display: flex;
  }
  .btn-reset {
    margin-left: 10px;
  }
</style>
